<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>第四节课</title>
		<style type="text/css">
			/*去除原来样式*/
			
			* {
				padding: 0;
				margin: 0;
			}
			
			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				/*
				 * 将边框设置在中间
				 */
				align-items: center;
				justify-content: center;
			}
			
			canvas {
				width: 500px;
				height: 500px;
				border: 1px solid #333333;
			}
			
			/*.anniu{
				width: 100px;
				height: 100px;
				
			}*/
		</style>
	</head>

	<body>
		<!--<img id="img" src="cut.jpeg" alt="" />-->
		<div class="container">
			<canvas id="canvas" width="500" height="500"></canvas>
			<div class="anniu">
				<input type="button" name="" id="right-btn" value="向右移动" />
				<input type="button" name="" id="left-btn" value="向左移动" />
				<br />
				<input type="button" name="" id="top-btn" value="向上移动" />
				<input type="button" name="" id="bottom-btn" value="向下移动" />
				<input type="button" name="" id="clear" value="清空" />
			</div>	
			
		</div>
	</body>

	<script>
		
		window.onload = function(){
			
			let oCanvas = document.getElementById("canvas");
			let pen = oCanvas.getContext("2d");
			
			
			pen.fillStyle="#"+Math.round(Math.random()*1000000);
			pen.fillRect(0,0,100,100);
			
			//在x轴上移动X（px），在y轴上移动Y（px）
			//translante(x,y)
			/*pen.translate(100,100);
			pen.fillStyle = "#99FF99";
			pen.fillRect(0,0,100,200);*/
				
			/*function move(obj,x,y){
				obj.fillRect()
			}*/
			
			let rightBtn = document.getElementById("right-btn");
			rightBtn.onclick = function(){
				pen.translate(10,0);
				pen.fillRect(0,0,100,100);
				
			}
			
			let leftBtn = document.getElementById("left-btn");
			leftBtn.onclick = function(){
				pen.translate(-10,0);
				pen.fillRect(0,0,100,100);
			}	
			
			let topBtn = document.getElementById("top-btn");
			topBtn.onclick = function(){
				pen.translate(0,-10);
				pen.fillRect(0,0,100,100);
			}
			
			let bottomBtn = document.getElementById("bottom-btn");
			bottomBtn.onclick = function(){
				pen.translate(0,10);
				pen.fillRect(0,0,100,100);
			}
			
			let clearr = document.getElementById("clear");
			clearr.onclick = function(){
				pen.clearRect(0,0,pen.width,pen.height);
				//pen.fillStyle="#FFFFFF";
				//pen.fillRect(0,0,500,500);
				pen.beginPath();
				pen.fillStyle="#"+Math.round(Math.random()*1000000);
				pen.fillRect(0,0,100,100);
			}
			
				
			/*let rightBtn = document.getElementById("right-btn");
			rightBtn.onclick = function(){
				move(10,0);
				
			}
			
			let leftBtn = document.getElementById("left-btn");
			leftBtn.onclick = function(){
				move(-10,0);
			}	
			
			let topBtn = document.getElementById("top-btn");
			topBtn.onclick = function(){
				move(0,-10);
			}
			
			let bottomBtn = document.getElementById("bottom-btn");
			bottomBtn.onclick = function(){
				move(0,10);
			}
			
			function move(x,y){
				pen.clearRect(0,0,500,500);
				pen.translate(x.y);
				pen.fillRect(0,0,100,100);
			}*/
			
			/*pen.fillStyle="plum";
			pen.fillRect(100,100,100,100);
			
			//pen.scale(0.5,0.5);
			pen.scale(0.7,0.7);
			pen.fillStyle="salmon";*/
			//pen.fillRect(100*2+100/2,100*2+100/2,100,100);
			//pen.fillRect(100+100*(1+0.5),100+100*(1+0.5),100,100);
			//pen.fillRect(500*0.2,500*0.2,100,100);
			//pen.fillRect((x+width/2)*(1-scaleX),(y+height/2)*(1-scaleY),100,100);
			
			/*pen.translate((100+width/2)*(1-scaleX),(y+height/2)*(1-scaleY),100,100);
			pen.fillRect(x,y,width,height);*/
			
			
			
			//rotate(角度)
			/*pen.fillStyle = "lightpink";
			
			let x = 100;
				y = 100;
				width = 100;
				height = 100;
			pen.fillRect(x,y,width,height);*/
				
			/*pen.translate(x + width/2,y + height/2);
			pen.rotate(Math.PI/180*30);
			pen.translate(-(x+width/2),-(y+height/2));
			pen.fillRect(x,y,width,height);
			*/
			
			/*for(var i=0 ; i<=90 ; i++){
				
					setInterval(function(){
					pen.translate(x + width/2,y + height/2);
					
					pen.rotate(Math.PI/180*i);
					pen.translate(-(x+width/2),-(y+height/2));
					//pen.clearRect(0,0,500,500);
					pen.fillRect(x,y,width,height);
				},300);
				
			}*/
			
			
		}
			
	</script>

</html>